﻿<!DOCTYPE html>

<head>
	<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />
	<meta charset="utf-8" />
	<title>my custom test page</title>

	<style>
		/*
		 * 1. id选择器: (#id),类选择器: (.id),元素选择器: (input),属性选择器: (a[href])
		 * 2、通配选择器 *
		 * 3、多个选择器逗号分隔,例: #selector1,#selector2
		 * 4、后代选择器 form div
		 * 5、子元素选择器 form > div
		 * 6、相邻兄弟选择器 form + div
		 * 7、伪类选择器 
		 * 		a:link {color: #FF0000}		未访问的链接 
		 *		a:visited {color: #00FF00}	已访问的链接 
		 *		a:hover {color: #FF00FF}	鼠标移动到链接上 
		 *		a:active {color: #0000FF}	选定的链接 
		 * 
		 * */
		/* 固定宽度 */
		
		.fixedWidth,
		input[type=text],
		input[type=password],
		select,
		textarea {
			width: 270px;
			height: 40px;
		}
		/* 按钮美化*/
		
		input[type=button] {
			width: 270px;
			height: 40px;
			/* 边框宽度 */
			border-width: 0px;
			/* 边框半径 */
			border-radius: 3px;
			/* 背景颜色 */
			background: #1E90FF;
			/* 鼠标移入按钮范围时出现手势 */
			cursor: pointer;
			/* 不显示轮廓线 */
			outline: none;
			/* 设置字体 */
			font-family: Microsoft YaHei;
			/* 字体颜色 */
			color: white;
			/* 字体大小 */
			font-size: 17px;
			/* top边距 */
			margin-top: 1%;
		}
		/* 鼠标移入按钮范围时改变颜色*/
		
		input[type=button]:hover {
			background: #5599FF;
		}
		/*自动生成表单数据样式*/
		
		.myFormData {
			border: 1px solid rgb(205, 208, 212);
			width: 25%;
			text-align: right;
			margin: 1%;
		}
		
		.myFormData div {
			margin-top: 5%;
		}
		
		.myFormData div>label {
			width: 50px;
		}
		
		.myFormData div>input {
			height: 34px;
			border: 1px solid #d5d5d5;
		}
		/*自动生成行数据样式*/
		
		.myDivData {
			/*弹性布局*/
			display: flex;
			height: auto;
			border: 1px solid rgb(205, 208, 212);
		}
		
		.myDivData div {
			border: 1px solid rgb(205, 208, 212);
			float: left;
			width: 500px;
			margin: 1%;
		}
	</style>

	<!-- 引入在线jquery.js-->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

	<script>
		$(function() {
			var timer = null;

			$('#enabledBtn').on('click', function() {
				var settingVal = $('#settingVal').val();
				if(isBlank(settingVal)) {
					writeLog('开启时间不能为空...');
					return;
				}
				writeLog('开启定时任务成功。。。:' + settingVal + '分钟执行一次');
				var timeFontId = "startTimeFont";
				writeLog('开启定时任务成功。。。:倒计时:<font id=' + timeFontId + ' data= ' + settingVal * 60 + '></font>');
				//初始化时间
				$('#' + timeFontId).text(formatSeconds(settingVal * 60));
				timer = setInterval(function time() {
					var num = parseInt($('#' + timeFontId).attr('data'));
					if(num > 1) {

						num -= 1;
						$('#' + timeFontId).attr('data', num);
						$('#' + timeFontId).text(formatSeconds(num));
					}
				}, 1000);

			});

			$('#disabledBtn').on('click', function() {
				clearInterval(timer);
				$('#logDiv').html('');
				writeLog('清除定时任务成功。。。');
			});

			//时分秒换算 传入秒
			function formatSeconds(value) {
				var theTime = parseInt(value); // 秒
				var theTime1 = 0; // 分
				var theTime2 = 0; // 小时
				if(theTime > 60) {
					theTime1 = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					// alert(theTime1+"-"+theTime);
					if(theTime1 > 60) {
						theTime2 = parseInt(theTime1 / 60);
						theTime1 = parseInt(theTime1 % 60);
					}
				}
				var result = "" + parseInt(theTime) + "秒";
				if(theTime1 > 0) {
					result = "" + parseInt(theTime1) + "分" + result;
				}
				if(theTime2 > 0) {
					result = "" + parseInt(theTime2) + "小时" + result;
				}
				return result;
			}

		});
	</script>

	<!-- commons scripts start--------------------------------------------------->
	<script>
		/*
								jq foreach 遍历数组和对象
						 		$.each(array, function(index, val) {
									console.log( index, val, this );
								});
								$.each(obj, function(key, val) {
									console.log(key, val, this );
								});
								*/
		//ajax请求发送
		function send(url, type, data, contentType) {
			data = isBlank(data) ? null : JSON.stringify(data);
			contentType = isBlank(contentType) ? "application/json" : contentType;

			var res = null;
			$.ajax({
				headers: {
					'x-app-token': isBlank(currentUser) ? '' : currentUser.token
				},
				url: url,
				contentType: contentType,
				async: false,
				type: type,
				data: data,
				success: function(result) {
					res = result;
				},
				error: function(e) {
					writeLog("服务请求失败:" + JSON.stringify(e));
				}
			});
			return res;
		}

		//字符串判空
		function isBlank(str) {
			if(undefined == str || null == str || 'null' == str || '' == str) {
				return true;
			}
			return false;
		}

		//返回结果判断
		function isSuccess(res) {
			if(!isBlank(res) && res.success) {
				return true;
			}

			writeLog('返回结果不通过', JSON.stringify(res));
			return false;
		}

		//写日志
		function writeLog(log, param) {
			if($('#logDiv').css('display') == 'none') {
				$('#logDiv').css('display', '');
			}

			if(isBlank(param)) {
				$('#logDiv').append('<li style=font-size:15px>' + log + '</li>');
			} else {
				$('#logDiv').append('<li style=font-size:15px>' + log + '[' + JSON.stringify(param) + ']</li>');
			}

		}

		//获取指定区间范围随机数，包括lowerValue和upperValue
		function randomFrom(lowerValue, upperValue) {
			return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
		}

		/**
		 * 按字段名称直接生成form表单,默认表单样式.myForm,选择器不传入默认追加到body
		 * @param {Object} objData		表单对象数据
		 * @param {Object} objColumn	自定义对应中文名称和字段值
		 * @param {Object} objClassName	类名称
		 * @param {Object} selector		选择器
		 * 
		 * 调用列子:
		 *  var obj = {a:1,b:2,c:3,d:4,e:5,f:6,g:7};
		 	var config = [{ColumnName:'描述a',DataId:'a'},{ColumnName:'描述b',DataId:'b'},{ColumnName:'描述c',DataId:'c'},{ColumnName:'描述d',DataId:'d'},{ColumnName:'描述e',DataId:'e'},{ColumnName:'描述f',DataId:'f'},{ColumnName:'描述g',DataId:'g'}]
		 	makeForm(obj,config)
		 */
		function makeForm(objData, objColumn, objClassName, selector) {
			//默认样式
			objClassName = isBlank(objClassName) ? "myFormData" : objClassName;

			var form = document.createElement("form");
			if(isBlank(selector)) {
				$('body').append(form);
			} else {
				selector.html(form);
			}

			var html = "";
			if(!isBlank(objColumn)) {

				$.each(objColumn, function(index, o) {
					html += '<div>';
					html += '<label>' + o.ColumnName + '</label>:&nbsp;&nbsp;';
					html += '<input type=text name=' + o.DataId + ' value=' + objData[o.DataId] + '>';
					html += '</div>';
				});
			} else {

				for(var e in objData) {
					html += '<div>';
					html += '<label>' + e + '</label>:&nbsp;&nbsp;';
					html += '<input type=text name=' + e + ' value=' + objData[e] + '>';
					html += '</div>';
				}
			}

			if(!isBlank(objClassName)) {
				$(form).attr("class", objClassName);
			}
			$(form).html(html);
		}

		/**
		 * 按字段名称直接生成行数据
		 * @param {Object} objColumn
		 * @param {Object} objData
		 * @param {Object} objClassName
		 * @param {Object} selector
		 * 
		 *  调用列子:
		 *  var obj = {a:1,b:2,c:3,d:4,e:5,f:6,g:7};
		 	var config = [{ColumnName:'描述a',DataId:'a'},{ColumnName:'描述b',DataId:'b'},{ColumnName:'描述c',DataId:'c'},{ColumnName:'描述d',DataId:'d'},{ColumnName:'描述e',DataId:'e'},{ColumnName:'描述f',DataId:'f'},{ColumnName:'描述g',DataId:'g'}]
		 	makeRow(obj,config)
		 */
		function makeRow(objData, objColumn, objClassName, selector) {
			//默认样式
			objClassName = isBlank(objClassName) ? "myDivData" : objClassName;

			var div = document.createElement("div");
			div.style = "margin-top:1%";
			div.attributes.className = "myDivData";

			if(isBlank(selector)) {
				$('body').append(div);
			} else {
				selector.html(div);
			}

			var html = "";
			if(isBlank(objColumn)) {
				for(var e in objData) {
					html += '<div>';
					html += '<label>' + e + ':&nbsp;</label>';
					html += '<label>' + objData[e] + '</label>';
					html += '</div>';
				}
			} else {

				$.each(objColumn, function(index, o) {
					html += '<div>';
					html += '<label>' + o.ColumnName + ':&nbsp;</label>';
					html += '<label>' + objData[o.DataId] + '</label>';
					html += '</div>';
				});
			}

			if(!isBlank(objClassName)) {
				$(div).attr("class", objClassName);
			}
			$(div).html(html);
		}

		/**
		 * 生成下拉框 格式[{value:'value1',text:'text1'}]
		 * @param {Object} objData
		 * @param {Object} selector
		 */
		function makeSelect(objData, selector) {
			var sel = selector;

			if(isBlank(selector)) {
				sel = document.createElement("select");
				$('body').append(sel);
			}

			var html = "<option>请选择</option>";
			$.each(objData, function(index, o) {
				html += '<option value=' + o.value + ' data= ' + JSON.stringify(o.target) + '>' + o.text + '</option>';
			});
			$(sel).html(html);
		}
	</script>
	<!-- commons scripts end--------------------------------------------------->
</head>

<body>

	<div class="main">
		<input class="fixedWidth" id="settingVal" type="text" value="" placeholder="间隔多少分钟">
		<br>
		<input id="enabledBtn" type="button" value="开启">
		<br>
		<input id="disabledBtn" type="button" value="关闭">
		<!--<input type="button" value="清除登陆信息" onclick="localStorage.removeItem('token');
			localStorage.removeItem('payPass');
			$('#ymPayPass').val('');
			$('#ymLoginDiv').show();" />
		<br />
		<br />
		<div id="ymLoginDiv">
			<input id="ymAccount" type="text" value="" placeholder="账号" />
			<input id="ymPass" type="password" value="" placeholder="密码" />
			<input id="ymLoginBtn" type="button" value="登陆" />
		</div>
		<br />

		<input id="ymPayPass" type="password" value="" placeholder="支付密码" />
		<br />
		<input type="button" value="一键完成任务" id="ymAuto" />
		<br />-->
		<!--
		  <input type="button" value="我的合约" id="ymHeYue" /> 
		  <br /> 
		-->
		<div id="logDiv" style="border:1px dotted red;margin-top:5%;display:none">
		</div>
	</div>
</body>